<template>
  <div class="myCanvasConten">
    <canvas ref="myCanvas" :style="{ width: '100%', height: '100%' }"> </canvas>
  </div>
</template>

<script>
export default {
  name: "MyCanvas",
  data() {
    return {
      canvas: null,
    };
  },
  props: ["canClass", "canData"],
  created() { },
  beforeCreate() { },
  mounted() {
    this.canvas = this.$refs.myCanvas;
    this.initChart();
  },
  methods: {
    initChart() {
      switch (this.canClass) {
        case "wellCanvas":
          this.drawWellCanvas();
          break;
        case "riverCanvas":
          this.drawRiverLevelCanvas();
          break;
      }
    },
    //窨井水位动画
    drawWellCanvas() {
      let _this = this;
      if (!_this.canvas) return;
      //获得画笔
      var ctx = _this.canvas.getContext("2d");
      //如果浏览器支持requestAnimFrame则使用requestAnimFrame否则使用setTimeout
      window.requestAnimFrame = (function () {
        return (
          window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          function (callback) {
            window.setTimeout(callback, 1000 / 60);
          }
        );
      })();
      // 波浪大小
      var boHeight = _this.canvas.height / 50;
      //水位高低，
      var posHeight = _this.canvas.height * (1 - _this.canData);
      //初始角度为0
      var step = 0;
      //定义三条波浪的颜色
      var lines = [
        "rgba(0, 125, 253, 0.3)",
        "rgba(0, 125, 253, 0.3)",
        "rgba(0, 125, 253, 0.3)",
      ];
      function loop() {
        //清除canvas内容
        ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
        step++;
        //画3个不同颜色的矩形
        for (var j = lines.length - 1; j >= 0; j--) {
          ctx.fillStyle = lines[j];
          //每个矩形的角度都不同，每个之间相差45度
          var angle = ((step + j * 50) * Math.PI) / 180;
          var deltaHeight = Math.sin(angle) * boHeight;
          var deltaHeightRight = Math.cos(angle) * boHeight;
          ctx.beginPath();
          ctx.moveTo(0, posHeight + deltaHeight);
          ctx.bezierCurveTo(
            _this.canvas.width / 2,
            posHeight + deltaHeight - boHeight,
            _this.canvas.width / 2,
            posHeight + deltaHeightRight - boHeight,
            _this.canvas.width,
            posHeight + deltaHeightRight
          );
          ctx.lineTo(_this.canvas.width, _this.canvas.height);
          ctx.lineTo(0, _this.canvas.height);
          ctx.lineTo(0, posHeight + deltaHeight);
          ctx.closePath();
          ctx.fill();
        }
        requestAnimFrame(loop);
      }
      loop();
    },
    //窨井水位动画
    drawRiverLevelCanvas() {
      let _this = this;
      if (!_this.canvas) return;
      //获得画笔
      var ctx = _this.canvas.getContext("2d");
      //如果浏览器支持requestAnimFrame则使用requestAnimFrame否则使用setTimeout
      window.requestAnimFrame = (function () {
        return (
          window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          function (callback) {
            window.setTimeout(callback, 1000 / 60);
          }
        );
      })();
      // 波浪大小
      var boHeight = _this.canvas.height / 50;
      //水位高低，
      var posHeight = _this.canvas.height * (1 - _this.canData);
      //初始角度为0
      var step = 0;
      //定义三条波浪的颜色
      var lines = [
        "rgba(0, 125, 253, 0.5)",
        "rgba(0, 125, 253, 0.5)",
        "rgba(0, 125, 253, 0.5)",
      ];
      function loop() {
        //清除canvas内容
        ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
        step++;
        //画3个不同颜色的矩形
        for (var j = lines.length - 1; j >= 0; j--) {
          ctx.fillStyle = lines[j];
          //每个矩形的角度都不同，每个之间相差45度
          var angle = ((step + j * 50) * Math.PI) / 180;
          var deltaHeight = Math.sin(angle) * boHeight;
          var deltaHeightRight = Math.cos(angle) * boHeight;
          ctx.beginPath();
          ctx.moveTo(0, posHeight + deltaHeight);
          ctx.bezierCurveTo(
            _this.canvas.width / 2,
            posHeight + deltaHeight - boHeight,
            _this.canvas.width / 2,
            posHeight + deltaHeightRight - boHeight,
            _this.canvas.width,
            posHeight + deltaHeightRight
          );
          ctx.lineTo(_this.canvas.width, _this.canvas.height);
          ctx.lineTo(0, _this.canvas.height);
          ctx.lineTo(0, posHeight + deltaHeight);
          ctx.closePath();
          ctx.fill();
        }
        requestAnimFrame(loop);
      }
      loop();
      // try{
      //   var img=new Image();
      //   img.src="../assets/img/popWindow/riverLevel-stone.png";
      //   console.log(img);
      //   ctx.drawImage(img,10,10);
      // }catch(error){
      //   console.log(error);
      // }

    },
  },
  watch: {
    canData: {
      handler: function (val, oldVal) {
        this.initChart();
      },
      deep: true,
    },
  },
};
</script>

<style>
.myCanvasConten {
  height: 100%;
  width: 100%;
  /* color: rgb(0, 0, 255); */
}
</style>
